<template>
	<view class="home">
		
		<view class="load" v-if="!load">
			<u-loading-icon mode="circle" inactive-color="#fff" text="正在加载..." vertical></u-loading-icon>
		</view>
		<block v-else>
			<view class="fix">
				<top-status></top-status>
				<view class="tabs wap">
					<view class="back_btn" @click="toback">
						<uni-icons type="back" size="24" color="#333"></uni-icons>					
					</view>		
					<image class="img2">
						<view class="tab1" :class="{'tab4':tabInd == 0}" @click="tabInd =0">人气榜</view>
						<view class="tab1" :class="{'tab4':tabInd == 1}" @click="tabInd =1">消费榜</view>
				</view>
			</view>
			<view v-if="tabInd == 0" class="all">
				<!-- #ifdef MP-WEIXIN -->
				<x-scroll :fixed="true" isNav @onRefresh="onRefresh" @scrolltolower="scrolltolower" :refresh="true" :scrollId="current_scroll_view">
				<!-- #endif -->
					<view  class="top1" @tap="nav_to(`/pages/user/user_visitor?id=${popularity_list[0].ID}`)">
						<image :src="popularity_list[0].UserImgs" mode="aspectFill"></image>
						<view class="top1_one">
							榜首#1
						</view>
						<view class="top1_name" >
							{{popularity_list[0].Name}}
						</view>
						<view class="top1_btm">
							
							<view class="top1_num">
								<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/hot.png" class="hot_icon"></image>{{popularity_list[0].TotalPrice*100}}
							</view>
							<view class="member member_he" v-if="popularity_list[0].UserType=='黑金年卡会员'">黑金年卡</view>
							<view class="member member_he" v-else-if="popularity_list[0].UserType=='黑金卡会员'">黑金卡</view>
							<view class="member number_huan" v-else-if="popularity_list[0].UserType=='金卡会员'">金卡</view>
							<view class="member number_huan" v-else-if="popularity_list[0].UserType=='体验会员'">体验金卡</view>
						</view>
					</view>
					
					<view class="Odd_num">
						<view  class="num_box" v-for="(item, index) in leftColumnData" :key="index" @tap="nav_to(`/pages/user/user_visitor?id=${item.ID}`)">
							<image :src="item.UserImgs" mode="aspectFill"></image>
							<view class="top1_one">
								#{{item.Seq}}
							</view>
							<view class="top1_name">
								{{item.Name}}
							</view>
							<view class="top1_btm">
								<view class="top1_num">
									<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/hot.png" class="hot_icon"></image>{{item.TotalPrice*100}}
								</view>
								<view class="member member_he" v-if="item.UserType=='黑金年卡会员'">黑金年卡</view>
								<view class="member member_he" v-else-if="item.UserType=='黑金卡会员'">黑金卡</view>
								<view class="member number_huan" v-else-if="item.UserType=='金卡会员'">金卡</view>
								<view class="member number_huan" v-else-if="item.UserType=='体验会员'">体验金卡</view>
							</view>
						</view>
					</view>
					<view class="even_num">
						<view class="text">
							<view class="text-1">
								榜单第一名
							</view>
							<view class="text-2">
								越活跃越人气
							</view>
						</view>
						<view  class="num_box" v-for="(item, index) in rightColumnData"  :key="index" @tap="nav_to(`/pages/user/user_visitor?id=${item.ID}`)">
							<image :src="item.UserImgs" mode="aspectFill"></image>
							<view class="top1_one">
								#{{item.Seq}}
							</view>
							<view class="top1_name">
								{{item.Name}}
							</view>
							<view class="top1_btm">
								<view class="top1_num">
									<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/hot.png" class="hot_icon"></image>{{item.TotalPrice*100}}
								</view>
								<view class="member member_he" v-if="item.UserType=='黑金年卡会员'">黑金年卡</view>
								<view class="member member_he" v-else-if="item.UserType=='黑金卡会员'">黑金卡</view>
								<view class="member number_huan" v-else-if="item.UserType=='金卡会员'">金卡</view>
								<view class="member number_huan" v-else-if="item.UserType=='体验会员'">体验金卡</view>
							</view>
						</view>
					</view>
				<!-- #ifdef MP-WEIXIN -->
				</x-scroll>
				<!-- #endif -->
			</view>
			<view v-if="tabInd == 1" class="all">
				<!-- #ifdef MP-WEIXIN -->
				<x-scroll :fixed="true" isNav @onRefresh="onRefresh" @scrolltolower="scrolltolower" :refresh="true">
				<!-- #endif -->
					<view  class="top1" @tap="nav_to(`/pages/user/user_visitor?id=${expend_list[0].ID}`)">
						<image :src="expend_list[0].UserImgs" mode="aspectFill"></image>
						<view class="top1_one">
							榜首#1
						</view>
						<view class="top1_name">
							{{expend_list[0].Name}}
						</view>
						<view class="top1_btm">
							<view class="top1_num">
								<uni-icons type="gift" class="" size="24" color="#DCC188"></uni-icons>{{expend_list[0].TotalPrice*100}}
							</view>
							<view class="member member_he" v-if="expend_list[0].UserType=='黑金年卡会员'">黑金年卡</view>
							<view class="member member_he" v-else-if="expend_list[0].UserType=='黑金卡会员'">黑金卡</view>
							<view class="member number_huan" v-else-if="expend_list[0].UserType=='金卡会员'">金卡</view>
							<view class="member number_huan" v-else-if="expend_list[0].UserType=='体验会员'">体验金卡</view>
							
						</view>
					</view>
					
					<view class="Odd_num">
						<view class="num_box" v-for="(item, index) in leftexpendData" :key="index" @tap="nav_to(`/pages/user/user_visitor?id=${item.ID}`)">
							<image :src="item.UserImgs" mode="aspectFill"></image>
							<view class="top1_one">
								#{{item.Seq}}
							</view>
							<view class="top1_name">
								{{item.Name}}
							</view>
							<view class="top1_btm">
								<view class="top1_num">
									<uni-icons type="gift" size="24" color="#DCC188"></uni-icons>{{item.TotalPrice*100}}
								</view>
								<view class="member member_he" v-if="item.UserType=='黑金年卡会员'">黑金年卡</view>
								<view class="member member_he" v-else-if="item.UserType=='黑金卡会员'">黑金卡</view>
								<view class="member number_huan" v-else-if="item.UserType=='金卡会员'">金卡</view>
								<view class="member number_huan" v-else-if="item.UserType=='体验会员'">体验金卡</view>
							</view>
						</view>
					</view>
					<view class="even_num">
						<view class="text">
							<view class="text-1">
								榜单第一名
							</view>
							<view class="text-2">
								霸气的榜单大哥
							</view>
						</view>
						<view class="num_box" v-for="(item, index) in rightexpendData" :key="index" @tap="nav_to(`/pages/user/user_visitor?id=${item.ID}`)">
							<image :src="item.UserImgs" mode="aspectFill" ></image>
							<view class="top1_one">
								<a :name="item.Seq">#{{item.Seq}}</a>
							</view>
							<view class="top1_name">
								{{item.Name}}
							</view>
							<view class="top1_btm">
								<view class="top1_num">
									<uni-icons type="gift" size="24" color="#DCC188"></uni-icons>{{item.TotalPrice*100}}
								</view>
								<view class="member member_he" v-if="item.UserType=='黑金年卡会员'">黑金年卡</view>
								<view class="member member_he" v-else-if="item.UserType=='黑金卡会员'">黑金卡</view>
								<view class="member number_huan" v-else-if="item.UserType=='金卡会员'">金卡</view>
								<view class="member number_huan" v-else-if="item.UserType=='体验会员'">体验金卡</view>
							</view>
						</view>
					</view>
				<!-- #ifdef MP-WEIXIN -->
				</x-scroll>
				<!-- #endif -->
			</view>
		</block>
		
	</view>
</template>

<script>
	import topStatus from "@/components/topStatus/topStatus.vue";
	export default {
		data(){
			return{
				tabInd:0,
				popularity_list:[],
				expend_list:[],	
				Recruit_list:[],
				// longitude: null,
				// latitude: null,
				PageIndex: 1, //页码
				PageSize: 20, //请求条数
				PageIndex1: 1, //页码
				PageSize1: 20, //请求条数
				
				current_scroll_view:0,
				
				load:false
			}	
		},
		components: { topStatus },
		computed: {
		    leftColumnData() {
		        return this.popularity_list.slice(1).filter((item, index) => index % 2 === 0);
		    },
			rightColumnData() {
				return this.popularity_list.slice(1).filter((item, index) => index % 2 !== 0);
			},
			leftexpendData() {
			    return this.expend_list.slice(1).filter((item, index) => index % 2 === 0);
			},
			rightexpendData() {
				return this.expend_list.slice(1).filter((item, index) => index % 2 !== 0);
			},
			leftRecruitData() {
			    return this.Recruit_list.slice(1).filter((item, index) => index % 2 === 0);
			},
			rightRecruitData() {
				return this.Recruit_list.slice(1).filter((item, index) => index % 2 !== 0);
			}
		  },
		onLoad(e) {
			this.tabInd=e.tabInd
			
			
			this.getList()
			// this.get_expendlist()
			
			if(e.id){
				
				this.current_scroll_view=e.id;
			}
			
		},
		watch:{
			//  tab标签发生变化
			tabInd(newVal) {
				this.PageIndex = 1;
				this.PageIndex1 = 1;
				this.getList();
			}
		},
		methods:{
			toback(){
				uni.navigateBack({
					delta: 1
				});
			},
			
			async getList(){
				if (this.tabInd == 0) {
					let res = await this.$api.post('/Member/AcceptGiftReports',{
						PageIndex:this.PageIndex,
						PageSize:this.PageSize,
						Last_Lat:0,
						Last_Lng: 0,
					})
					//发现数组赋值
					if (this.PageIndex == 1) {
						this.popularity_list = res.data
					} else {
						this.popularity_list = this.popularity_list.concat(res.data)
					}
					
					this.isMore = Array.isArray(res.data) && res.data.length >= this.PageSize;
					
					this.load=true;
					
				}else{
					let res = await this.$api.post('/Member/SendGiftReports',{
						PageIndex:this.PageIndex1,
						PageSize:this.PageSize1,
						Last_Lat:0,
						Last_Lng: 0,
					})
					
					if (this.PageIndex1 == 1) {
						this.expend_list = res.data
					} else {
						this.expend_list = this.expend_list.concat(res.data)
					}
					this.isMore1 = Array.isArray(res.data) && res.data.length >= this.PageSize1;
					
					this.load=true;
				}
				
			},
			//下拉刷新
			async onRefresh() {
				this.PageIndex = 1;
				this.PageIndex1 = 1;
				await this.getList()
				// await this.get_expendlist()
			},
			//滚动到底部触发
			async scrolltolower() {
				if (this.isMore) {
					this.PageIndex++;
					this.getList();
				}
				if (this.isMore1) {
					this.PageIndex1++;
					this.getList();
				}
			},
		}
	}
</script>

<style lang="scss"> 
.home {
		position: relative;
	}
	.fix {
	
		width: 750rpx;
		left: 0;
		z-index: 999;
	}
	
	.tabs {
		box-sizing: border-box;
		z-index: 200;
		height: 44px;
		width: 750rpx;
		display: flex;
		align-items: center;
		background: #fff;
		.img2 {
			height: 36rpx;
			width: 36rpx;
			margin-right: 120rpx;
		}
		.back_btn{
			width:50rpx;
		}
		.tab1{
			font-size: 32rpx;
			margin-right: 52rpx;
			line-height: 44px;
		}
		.tab4 {
			font-weight: bold;
			color: #333;
			position: relative;
	
			&::before {
				position: absolute;
				left: 50%;
				bottom: 4rpx;
				transform: translate(-50%,-50%);
				display: block;
				content: "";
				width: 50%;
				height: 8rpx;
				background: #333;
				border-radius: 16rpx;
			}
		}
	}
	.top1{
		width: 750rpx;
		height: 860rpx;
		image{
			width: 750rpx;
			height: 860rpx;
		}
		.top1_one{
			border-radius:0 20rpx 20rpx 0;
			width: 176rpx;
			height: 80rpx;
			background-image: linear-gradient(#FEF0BC,#B98B51);
			display: flex;
			align-items: center;
			justify-content: center;
			color: #4C310C;
			font-size: 40rpx;
			position: relative;
			bottom: 780rpx;
		}
		.top1_name{
			color: #FFFFFF;
			font-size: 48rpx;
			position: relative;
			bottom: 245rpx;
			left: 38rpx;
			width: 400rpx;
		}
		.top1_btm{
			display: flex;
			position: relative;
			bottom: 240rpx;
			left: 38rpx;
			align-items: center;
			width: 400rpx;
						
			.top1_num{
				background-color: #ECF0F4;
				color: #000000;
				border-radius: 4rpx;
				padding:0 6rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				height: 40rpx;
				font-size: 24rpx;
				margin-right: 10rpx;
				
				.hot_icon{
					padding:2rpx 2rpx 2rpx 2rpx;
					width:20rpx !important;
					height:32rpx !important;
				}
			}
			
		}
	}
	.member {
		padding: 0 10rpx;
		height: 40rpx;
		background: linear-gradient(135deg, #7E7E7E 0%, #292929 100%);
		border-radius: 2rpx;
		border: 2rpx solid #D6C6AB;
		text-align: center;
		color: #fff;
		font-size: 24rpx;
		line-height: 40rpx;
		width: 120rpx;
	}
	
	.number_huan {
		color: #4C310C;
		background: linear-gradient(180deg, #FDF9F6 0%, #E1C4A6 100%);
		border: 2rpx solid #E6CEB5;
	}
	
	.number_yin {
		color: #4C310C;
		background: linear-gradient(180deg, #c9daf8 0%, #E1C4A6 100%);
		border: 2rpx solid #E6CEB5;
	}
	.text{
		height: 124rpx;
		// width: 212rpx;
		// float: right;
		// margin-top: 36rpx;
	 //    margin-right: 78rpx;
		.text-1{
			text-align: center;
			height: 56rpx;
			font-size: 40rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 600;
			color: #FDEFBB;
			line-height: 56rpx;
			background: linear-gradient(180deg, #FEF0BC 0%, #B98B51 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
		.text-2{
			text-align: center;
			height: 44rpx;
			font-size: 28rpx;
			font-family: PingFang-SC-Medium, PingFang-SC;
			font-weight: 500;
			color: #FDEFBB;
			line-height: 44rpx;
			background: linear-gradient(180deg, #FEF0BC 0%, #B98B51 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
	}
	.Odd_num{
		margin-top: 12rpx;
		width: 368rpx;
		.num_box{
			width: 368rpx;
			height: 480rpx;
			margin-bottom: 12rpx;
			image{
				width: 368rpx;
				height: 480rpx;
				border-radius: 8rpx;
			}
			.top1_one{
			    border-radius: 0rpx 8rpx 8rpx 0rpx;
			    width: 48rpx;
			    height: 40rpx;
			    background-image: linear-gradient(#FEF0BC, #B98B51);
			    display: flex;
			    align-items: center;
			    justify-content: center;
			    color: #4C310C;
			    font-size: 24rpx;
			    position: relative;
			    bottom: 460rpx;
			}
			.top1_name{
				color: #FFFFFF;
				font-size: 28rpx;
				position: relative;
				bottom: 155rpx;
				left: 18rpx;
				width: 280rpx;
			}
			.top1_btm{
				display: flex;
				position: relative;
				bottom: 150rpx;
				left: 18rpx;
				align-items: center;
				width: 280rpx;
				.top1_num{
					background-color: #ECF0F4;
					color: #000000;
					border-radius: 4rpx;
					padding:0 6rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					height: 40rpx;
					font-size: 24rpx;
					margin-right: 10rpx;
					
					.hot_icon{
						padding:2rpx 2rpx 2rpx 2rpx;
						width:20rpx !important;
						height:32rpx !important;
					}
				}
			}
		}
	}
	.even_num{
		position: absolute;
	    margin-top: 12rpx;
	    width: 368rpx;
	    left: 380rpx;
	    top: 890rpx;

		.num_box{
			width: 368rpx;
			height: 480rpx;
			margin-bottom: 12rpx;
			image{
				width: 368rpx;
				height: 480rpx;
				border-radius: 8rpx;
			}
			.top1_one{
			    border-radius: 0rpx 8rpx 8rpx 0rpx;
			    width: 48rpx;
			    height: 40rpx;
			    background-image: linear-gradient(#FEF0BC, #B98B51);
			    display: flex;
			    align-items: center;
			    justify-content: center;
			    color: #4C310C;
			    font-size: 24rpx;
			    position: relative;
			    bottom: 460rpx;
			}
			.top1_name{
				color: #FFFFFF;
				font-size: 28rpx;
				position: relative;
				bottom: 155rpx;
				left: 18rpx;
				width: 280rpx;
			}
			.top1_btm{
				display: flex;
				position: relative;
				bottom: 150rpx;
				left: 18rpx;
				align-items: center;
				width: 280rpx;
				.top1_num{
					background-color: #ECF0F4;
					color: #000000;
					border-radius: 4rpx;
					padding:0 6rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					height: 40rpx;
					font-size: 24rpx;
					margin-right: 10rpx;
					
					.hot_icon{
						padding:2rpx 2rpx 2rpx 2rpx;
						width:20rpx !important;
						height:32rpx !important;
					}
				}
			}
		}
	}
	
	.container {
	  display: flex;
	}
	
	.column {
	  flex: 1;
	  padding: 10px;
	}
	
	.title {
	  font-weight: bold;
	  margin-bottom: 10px;
	}
	
	.item {
	  margin-bottom: 10px;
	}
	.all{
		animation: wrapper-gradient 0.3s linear;
	}
	@keyframes wrapper-gradient {
	  0% {
	    transform: translateY(-5%);
		opacity: 0;
	  }
	  100% {
	    transform: translateY(0);
		opacity: 1;
	  }
	}
</style>